<!DOCTYPE html>
<html>
    <head>

        <!-- Set the viewport width to device width for mobile -->
        <meta name="viewport" content="width=device-width" />            

        <link rel="stylesheet" href="recursos/css/loadingGif.css">		

        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="recursos/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="recursos/css/component.css"/>
        <link rel="stylesheet" type="text/css"  href="recursos/css/style.css" />

        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <!-- <script type="text/javascript" src="recursos/js/custom.js"></script>-->
        <script type="text/javascript" src="recursos/js/jquery-ui-timepicker-addon.js"></script> 
        <script type="text/javascript" src="recursos/js/jquery-ui-sliderAccess.js"></script>
        <script type="text/javascript" src="recursos/js/funciones_generales.js"></script>
        <link rel="stylesheet" type="text/css" href="recursos/css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="recursos/css/foundation.css" />
        <script  type="text/javascript"  src="recursos/js/vendor/custom.modernizr.js"></script>                                  

    </head>
    <body>

        <img id='loadingGif' src='recursos/imagenes/ajax-loader.gif' alt='' />

        <!-- Navigation -->

        <div class="row">
            <div class="large-12 columns">
                <h2>Super Centro Los Ejecutivos</h2>
                <p>Version 1.0</p>
                <hr />
            </div>
        </div>
        <!-- End Top Bar -->

        <div class="row">
            <div class="large-12 columns">

                <!-- Content Slider -->

                <!--<div class="row">
                    <div class="large-12 hide-for-small">

                        <div id="featured" data-orbit>
                            <img src="http://placehold.it/1200x400&text=Slide Image 1" alt="slide image">
                            <img src="http://placehold.it/1200x400&text=Slide Image 2" alt="slide image">
                            <img src="http://placehold.it/1200x400&text=Slide Image 3" alt="slide image">
                        </div>

                    </div>
                </div>-->

                <!-- End Content Slider -->

                <!-- Mobile Header -->

                <div class="row">
                    <div class="large-12 columns show-for-small">

                        <img src="http://placehold.it/1200x700&text=Mobile Header">

                    </div>
                </div><br>

                <!-- End Mobile Header -->
                <div id="general_error"></div>
                <div class="row">
                    <div class="large-12 columns">
                        <div class="row">
                            <div class="large-6 columns">
                                <div class="panel radius">
                                    <form action="#" method="post" id="frmLogin" class="login" data-abide>
                                        <fieldset>
                                            <div class="row" >
                                                <div class="columns">
                                                    <input id="login" required  name="login" type="text" placeholder="Usuario" >
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="columns">
                                                    <input id="password" required name="password" type="Password" placeholder="password" >
                                                </div>
                                            </div>
                                            <div class="row columns">
                                                <button id="loginButton" name="loginButton" class="medium button green" type="submit">Entrar</button>
                                            </div>
                                        </fieldset>
                                    </form>    
                                </div>
                            </div>  
                            <!--<div class="large-6 columns">
                                <div class="panel callout radius">
                                    <h5>Plataforma tecnologica.</h5>
                                    <p>It's a little ostentatious, but useful for important content.
                                        It's a little ostentatious, but useful for important content.
                                        It's a little ostentatious, but useful for important content.</p>
                                    <p>It's a little ostentatious, but useful for important content.
                                        It's a little ostentatious, but useful for important content.
                                        It's a little ostentatious, but useful for important content.
                                        It's a little ostentatious, but useful for important content.</p>                                                
                                </div>
                            </div> -->               

                        </div>
                    </div>
                </div>

                <!-- End Content -->

                <!-- Footer -->

                <footer class="row">
                    <div class="large-12 columns"><hr>
                        <div class="row">

                            <div class="large-6 columns">
                                <p>FG Tecnologia &copy; Derechos reservados.</p>
                            </div>

                            <!--<div class="large-6 small-12 columns">
                                <ul class="inline-list right">
                                    <li><a href="#">Link 1</a></li>
                                    <li><a href="#">Link 2</a></li>
                                    <li><a href="#">Link 3</a></li>
                                    <li><a href="#">Link 4</a></li>
                                </ul>
                            </div>-->

                        </div>
                    </div>
                </footer>

                <!-- End Footer -->

            </div>
        </div>

        <script>
            document.write('<script src=recursos/js/vendor/' +
                    ('__proto__' in {} ? 'zepto' : 'jquery') +
                    '.js><\/script>')
        </script>
        <script src="recursos/js/foundation.min.js"></script>
        <script>
            $(document).foundation();
        </script>
        <!-- End Footer -->
        <script type="text/javascript">
            $(function() {

                $(document).on("click", "#loginButton", function(e) {
                    e.preventDefault();

                    var login = $("#login").val();
                    var password = $("#password").val();
                    if (login === "") {
                        showPopupBoxMessage("El campo usuario no puede estar vacio");
                    } else if (password === "") {
                        showPopupBoxMessage("El campo password no puede estar vacio");
                    } else {
                        //--- realizo la peticion al controlador
                        $.ajax({
                            type: "POST",
                            url: "controlador/SeguridadUsuario.php",
                            data: "OPERACION=login&login=" + login + "&password=" + password + "&controlador=SeguridadUsuario",
                            dataType: 'json',
                            cache: false,
                            success: function(item) {
                                if (item.hasOwnProperty("ERROR")) {
                                    showPopupBoxMessage(item.ERROR);
                                } else {
                                    window.location.href = "vista/index.php";
                                }
                            }, 
                            error: function(request, status, error) { alert(error); }
                        });
                    }
                });

            });
        </script>

    </body>
</html>
